<template>
	<view>
		<view class="list" v-for="(item, index) in dataList" :key="index" @click="clickReserve(item)">
			<view class="left">
				<image class="img" mode="aspectFill" :src="item.technician.avatar || baseImgUrl + 'img_common_tech.png'"
					alt="" />
				<view class="isCheck" v-if="item.isClick && showButton">
					<u-icon name="checkmark-circle-fill" color="rgba(194, 126, 21, 1)" size="15"
						style="background-color: yellow;"></u-icon>
				</view>
				<!-- <view class="show" v-if="item.status === 1">头衔标签</view> -->
			</view>
			<view class="right">
				<view class="title">
					{{ item.technician.name }}
					<view class="tag">评分：{{ Number(item.score).toFixed(2) }} 分</view>
				</view>
				<view class="distance">
					<view style="overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 1; 
              -webkit-box-orient: vertical;">所在门店：{{ item.technician.belongStoreName }}</view>
					<view class="name-right">
						<uni-icons type="location-filled" size="20" color="#b4b4b4"></uni-icons>
						<view class="distant">{{ item.distance }}km</view>
						<uni-icons type="right" size="12" color="#676767"></uni-icons>
					</view>
				</view>
				<view class="money-box">
					<view class="red">
						<!-- <u-icon name="rmb" color="#fe4d4f" size="15"></u-icon> -->
						<!-- <view class="rmb-text"></view> -->
						<view class="money">简介：{{item.technician.synopsis}}</view>
					</view>
				</view>
				<view class="button">
					<view class="yellow" @click.stop="clickTechnician(item)">详情>></view>
					<view class="pre-box" v-if="item.technician.scheduleStatus==1" @click.stop="clickReserve(item)">
						预约
					</view>
					<view class="rest-box" v-else>
						休息
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default {
		name: 'TechnicianListComponents',
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				dataList: [],
				count: 5
			}
		},
		props: {
			technicianList: {
				type: Array,
				default: []
			}
		},
		watch: {
			technicianList: {
				handler(newVal, oldVal) {
					this.dataList = [...newVal]
				}
			}
		},
		created() {
			this.dataList = [...this.technicianList]
		},

		methods: {
			chooseClick(item, index) {
				this.$emit('chooseClick', item, index)
			},
			cancelChoose(item) {
				this.$emit('cancelChoose', item)
			},
			clickReserve(item) {
				if(item.technician.scheduleStatus==1){
					this.$emit('reserve', item)
				}
			},
			clickTechnician(item) {
				this.$emit('toDetail', item)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 37rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(230, 230, 230, 1);

		.left {
			position: relative;
			width: 182rpx;
			height: 198rpx;
			display: flex;
			align-items: center;

			.img {
				width: 182rpx;
				height: 182rpx;
				border-radius: 13.93rpx;
			}

			.show {
				position: absolute;
				bottom: 0;
				left: 21%;
				width: 103rpx;
				height: 37rpx;
				line-height: 37rpx;
				opacity: 1;
				border-radius: 32rpx;
				background: rgba(255, 105, 40, 1);
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}

			.isCheck {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}

		.right {
			width: 68%;
			text-align: left;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 12rpx;
				display: flex;

				.tag {
					width: 140rpx;
					height: 43rpx;
					opacity: 1;
					border-radius: 13rpx;
					background: rgba(255, 241, 238, 1);
					text-align: center;
					line-height: 43rpx;
					margin-left: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 50, 5, 1);
				}
			}

			.distance {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				margin-bottom: 12rpx;

				.name-right {
					display: flex;

					.distant {
						font-size: 22rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 31.86rpx;
						color: rgba(102, 102, 102, 1);
						margin: 0 5rpx 0 6rpx;
						transform: translateY(5rpx);
						// width: 600rpx;

					}
				}
			}

			.rate {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(194, 126, 21, 1);

				.rate-value {
					display: flex;
				}
			}

			.des {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-top: 10rpx;
			}

			// .pre-box {
			//   display: flex;
			//   justify-content: flex-end;
			//   margin-top: -15rpx;

			.preview {
				width: 96rpx;
				height: 41rpx;
				opacity: 1;
				border-radius: 38rpx;
				line-height: 41rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				background: rgba(236, 236, 236, 1);
				color: rgba(153, 153, 153, 1);
			}

			.isClick {
				background: #c27e15;
				color: #fff;
			}

			.notClick {
				border: 1rpx solid rgba(194, 126, 21, 1);
				color: rgba(194, 126, 21, 1);
				background-color: #fff;

			}

			// }
			.money-box {
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 控制行数 */
				-webkit-box-orient: vertical;

				.red {
					display: flex;
					align-items: center;

					.money {
						font-size: 26rpx;
						font-weight: 500;
						width: 700rpx;
						// letter-spacing: -0.28rpx;
						line-height: 47rpx;
						color: #000;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 控制行数 */
						-webkit-box-orient: vertical;

					}

					.rmb-text {
						width: 200rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #000;
						// margin-left: 12rpx;
						// transform: translateY(10rpx);
					}
				}

				.grey {
					display: flex;
					align-items: center;
					color: rgba(102, 102, 102, 1);
					// margin: 0 30rpx;

					.money {
						font-size: 20rpx;
						font-weight: 400;
						// letter-spacing: -0.2rpx;
						line-height: 32.99rpx;
						transform: translateY(10rpx);
					}

					.rmb-text {
						font-size: 15rpx;
						font-weight: 400;
						// letter-spacing: 0rpx;
						line-height: 26.98rpx;
						// transform: translateY(14rpx);
						// margin-left: 12rpx;
					}
				}
			}

			.button {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.yellow {
					color: #faa040;
					font-size: 26rpx;
				}
			}


			.pre-box {
				width: 92rpx;
				height: 41rpx;
				opacity: 1;
				border-radius: 32rpx;
				line-height: 41rpx;
				background: rgba(194, 126, 21, 1);
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
			}
			.rest-box {
				width: 92rpx;
				height: 41rpx;
				opacity: 1;
				border-radius: 32rpx;
				line-height: 41rpx;
				background: rgba(157, 157, 157, 1.0);
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
			}
		}
	}
</style>